<template>
  <div class="page">
    <!-- <Loading v-show="LOADING"></Loading> -->
    <nav-com
      title="中军值到账"
      :showView="true"
      @back="backHandler()"
    >
      <div
        @click="transferList()"
        style="font-size: 14px;color: #F86931;"
      >到账记录</div>
    </nav-com>
    <div style="padding: 20px">
      <div style="margin-bottom: 200px">
        <span>到账金额<span style="color:red"> *</span><span style="color:#999;font-size:12px">中军值应先转换成余额，由余额到账</span></span>

        <van-field
          label-class="label"
          :border="true"
          type="number"
          style="margin-top: 5vw"
          v-model="score"
          placeholder="请输入中军值到账数量"
        />
        <span style="
            font-size: 10px;
            color: #f86830;
            font-weight: 500;
            margin-left: 10px;
          ">当前可用中军值：{{ shareUser.score }}</span>
      </div>
      <div>
        <div style="line-height: 40px">说明：</div>
        <div style="color: #818181; font-size: 14px; line-height: 20px">
          1、每天只能兑换1次
        </div>
        <div style="color: #818181; font-size: 14px; line-height: 20px">
          2、每天最多兑换300中军值
        </div>
      </div>
      <div
        class="btn"
        @click="transfer"
      >兑换</div>
    </div>
  </div>
</template>
    
    <script>
import navCom from "@/component/nav";
import { Toast, RadioGroup, Radio, Field } from "vant";
import {
  couponIncrease,
  scoreSubgift,
  getuserInfo,
  scoreWithdrawal,
} from "@/api/api";
import Loading from "@/component/loading";
export default {
  name: "index",
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      mobile: "",
      money: "",
      score: "",
      radio: "1",
      shareUser: {},
      LOADING: false,
    };
  },
  async mounted() {
    // console.log(1);
    await this.getuserInfo();
    console.log()
    if (this.shareUser.one_day_order == 0) {
      this.$dialog
        .alert({
          title: "到账",
          message: "亲，本月您还未在每月一品专区购买过商品，赶快去购买吧！",
          showCancelButton: true,
          confirmButtonText: "去购买",
        })
        .then(() => {
          this.$router.push("/everyMonth");
        })
        .catch(() => {
          this.backHandler();
        });
      return;
    }
  },
  methods: {
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    async getuserInfo() {
      // if(this.shareUser!=null){
      //     return;
      // }
      this.LOADING = true;
      await getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        this.LOADING = false;
        if (res.data.code == 1) {
          this.shareUser = res.data.data;
        }
      });
    },
    transferList() {
      this.$router.push({ name: "transferRecord", params: { type: 7 } });
    },
    async transfer() {
      console.log(this.$route.params.id);
      if (!this.score.trim()) {
        Toast("中军值未输入");
      } else if (!this.score > 500) {
        Toast("超出每日到账数量");
      } else {
        const res = await scoreWithdrawal({
          score: this.score,
        });
        console.log("scoreSubgift", res);
        Toast(res.data.msg);
        if (res.data.code == 1) {
          this.backHandler();
        }
      }
    },
  },
};
</script>
    <style scoped>
body {
  background-color: #ffffff;
}
.page {
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.btn {
  width: 50.6vw;
  height: 13.3vw;
  background: #f86830;
  margin: 0 auto;
  font-size: 4.5vw;
  text-align: center;
  line-height: 13.3vw;
  margin-top: 10vw;
  font-family: PingFangSC-Medium, PingFang SC;
  /*font-weight: 500;*/
  color: #ffffff;
  border-radius: 50px;
}
.label {
  font-size: 4.5vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}
.van-cell {
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  margin-bottom: 15px;
}
</style>